<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link href="../static/css/Order.css" type="text/css" rel="stylesheet">
    <link href="../static/image/log.png" rel="icon">
    <script src="../static/js/jquery-1.8.0.js"></script>
</head>
<body>
<div>
    <div>
        <div class="top-01" style="margin-bottom: 20px ; ">
            <div class="top-02">
                <ul>
                    <li><a href="shops.html"><img src="../static/image/Mi01.png" height="82" width="82" alt="Image 1"/></a></li>
                    <li><a style="width: 216px; height: 87px; display: inline-block"><img src="../static/image/yuan01.png"height="100" width="123"alt="Image 2"/></a></li>
                    <li class="search-container">
                        <form action="MoHoServlet" method="post">
                            <input type="text" name="name" placeholder="元神降临" style="outline: none">
                            <input type="submit" value="" style="background: url('image/Sou01.png') no-repeat; background-size: 42px 40px; width: 40px; height: 40px; border: none;">
                        </form>
                    </li>
                    <li><a href="zhiId" id="head01"><img src="../static/image/headimage.bmp" height="30" width="30" alt="Profile"/></a></li>
                    <li id="img-01"><a href="#"><img src="../static/image/buyCarRed.png" alt="Cart"/></a><a href="carImageServlet"><span class="car">购物车</span></a></li>
                </ul>
            </div>
        </div>
        <div class="top01id">
            <a><img src="../static/image/headimage.bmp" style="border-radius: 100px"></a>
            <a><span>yangchen</span><br><span class="top01id0101">AID：2329894</span></a>
        </div>
        <div class="zhong01">
            <div class="cebian">
                <div style="font-weight: 700;padding-bottom: 20px ">个人中心</div>
                <div class="cebian01">
                    <ul>
                        <li><a href="zhiId">我的订单</a></li>
                        <li>退款售后</li>
                        <li><a href="address.html"> 地址管理</a></li>
                    </ul>
                </div>
            </div>
            <div class="xia0101">
                <p>我的订单</p>
                <ul class="order-tabs">
                    <li data-target="allOrders">全部订单</li>
                    <li data-target="pendingPayment">待付款</li>
                    <li data-target="shipments">待发货</li>
                    <li data-target="receiving">待收货</li>
                </ul>
                <div class="order-content">
                    <%--所有订单--%>
                    <div id="allOrders" class="content">
                        <%--交易关闭--%>
                        <div id="CloseOrders" class="content">
                            <c:forEach items="${trolley4}" var="trolley4">
                                <div class="dingdan02">
                                    <p><img src="image/3.1.png" width="22" height="22">原神万有铺子<span
                                            style="color: #cccccc;font-size: 15px;margin-left: 10px ">交易关闭</span>
                                    </p>
                                    <div class="dingdan01">
                                        <a style="margin-top: 10px; display: inline-block">
                                            <img src="image/${trolley4.img}"
                                                 style="border-radius: 100px;width: 100px;height: 100px">
                                            <a style="font-size: 16px; font-weight: 500; width: 400px;margin-left: 10px ;margin-top: 20px">${trolley4.trolleyName}</a>
                                            <a class="aoo1" style="margin-left: 50px">￥${trolley4.price}<span
                                                    style="margin-left: 50px">X${trolley4.number}</span><span
                                                    style="margin-left: 50px ; color: #cccccc">￥${trolley4.number*trolley.price}</span><a
                                                    class="aoo01"
                                                    style="color: #007bff">订单详情</a></a>
                                        </a>
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                    <!--待付款-->
                    <div id="pendingPayment" class="content">

                        <c:forEach items="${trolleys1}" var="trolleys">

                            <div class="pendingPayment">
                                <p><img src="../static/image/3.1.png" width="22" height="22">原神万有铺子<span
                                        style="color: red;font-size: 15px;margin-left: 10px ">待付款</span></p>
                                <div class="dingdan01" style="position:relative ">
                                    <a style="margin-top: 10px; display: inline-block">
                                        <img src="image/${trolleys.img}"
                                             style="border-radius: 100px ;width: 100px;height: 100px">
                                        <a style="font-size: 16px; font-weight: 500; width: 400px;margin-left: 10px ;margin-top: 20px">${trolleys.trolleyName}</a>
                                        <a class="aoo1" style="margin-left: 50px">￥${trolleys.price}<span
                                                style="margin-left: 50px">X${trolleys.number}</span><span
                                                style="margin-left: 50px ; color: red">￥${trolleys.price*trolleys.number}</span>
                                            <a href="updateZhiId?zhiId=${trolleys.id}" class="aoo01"
                                               style="color: #007bff">
                                                <input type="hidden" name="zhiId" value="${trolleys.id}">
                                                <span class="pay" id="paymentBtn"
                                                      style="position: absolute;margin-top: -50px;width: 100px;text-align:center;line-height: 40px;border: 1px solid lightpink;font-size: 15px ">
                                                    付款</span>订单详情</a></a>
                                    </a>
                                </div>
                            </div>
                            <%-- <div id="overlay" class="overlay"></div>

                             <div id="modal" class="modal">
                                 <div class="modal-header">确认付款</div>
                                 <div class="modal-footer">
                                     <a href="updateZhiId?zhiId=${trolleys.id}" id="confirmBtn"
                                        class="modal-button confirm-btn">确认</a>
                                     <button id="cancelBtn" class="modal-button cancel-btn">取消</button>
                                 </div>
                             </div>--%>
                        </c:forEach>
                    </div>
                    <!--待发货-->
                    <div id="shipments" class="content">
                        <c:forEach items="${trolleys2}" var="trolley2">
                            <div class="shipments">
                                <p><img src="../static/image/3.1.png" width="22" height="22">原神万有铺子<span
                                        style="color: red;font-size: 15px;margin-left: 10px ">待发货</span></p>
                                <div class="dingdan01">
                                    <a style="margin-top: 10px; display: inline-block">
                                        <img src="image/${trolley2.img}"
                                             style="border-radius: 100px;width: 100px;height: 100px">
                                        <a style="font-size: 16px; font-weight: 500; width: 400px;margin-left: 10px ;margin-top: 20px">${trolley2.trolleyName}</a>
                                        <a class="aoo1" style="margin-left: 50px">￥${trolley2.price}<span
                                                style="margin-left: 50px">X${trolley2.number}</span><span
                                                style="margin-left: 50px ; color: red">￥${trolley2.number*trolley2.price}</span><a
                                                class="aoo01" style="color: #007bff">订单详情</a></a>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                    <!--待收货-->
                    <div id="receiving" class="content">
                        <c:forEach items="${trolleys3}" var="trolley3">
                            <div class="receiving">
                                <p><img src="../static/image/3.1.png" width="22" height="22">原神万有铺子<span
                                        style="color: red;font-size: 15px;margin-left: 10px ">待收货</span></p>
                                <div class="dingdan01" style="position:relative">
                                    <a style="margin-top: 10px; display: inline-block">
                                        <img src="image/${trolley3.img}"
                                             style="border-radius: 100px;width: 100px;height: 100px">
                                        <a style="font-size: 16px; font-weight: 500; width: 400px;margin-left: 10px ;margin-top: 20px">${trolley3.trolleyName}</a>
                                        <a class="aoo1" style="margin-left: 50px">￥${trolley3.price}<span
                                                style="margin-left: 50px">X${trolley3.number}</span><span
                                                style="margin-left: 50px ; color: red">￥${trolley3.price*trolley3.number}</span>
                                            <a href="#" class="aoo01" style="color: #007bff"><span class="pay"
                                                                                                   style="position: absolute;margin-top: -50px;width: 100px;text-align:center;line-height: 40px;border: 1px solid lightpink;font-size: 15px ">收货</span>订单详情</a></a>
                                    </a>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const tabs = document.querySelectorAll('.order-tabs li');
        const contents = document.querySelectorAll('.order-content .content');

        // 显示所有内容
        contents.forEach(content => {
            content.classList.add('active');
        });

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const targetId = tab.getAttribute('data-target');

                if (targetId) {
                    // 隐藏所有内容
                    contents.forEach(content => {
                        content.classList.remove('active');
                    });

                    // 显示选中的内容
                    if (targetId === 'allOrders') {
                        contents.forEach(content => {
                            content.classList.add('active');
                        });
                    } else {
                        const targetContent = document.getElementById(targetId);
                        if (targetContent) {
                            targetContent.classList.add('active');
                        }
                    }
                }
            });
        });
    });

    // 获取按钮和弹窗元素
    const paymentBtn = document.getElementById('paymentBtn');
    const overlay = document.getElementById('overlay');
    const modal = document.getElementById('modal');
    const confirmBtn = document.getElementById('confirmBtn');
    const cancelBtn = document.getElementById('cancelBtn');

    // 显示弹窗和遮罩
    paymentBtn.addEventListener('click', () => {
        overlay.style.display = 'block';
        modal.style.display = 'block';
    });

    // 关闭弹窗和遮罩
    cancelBtn.addEventListener('click', () => {
        overlay.style.display = 'none';
        modal.style.display = 'none';
    });

    // 点击遮罩也关闭弹窗
    overlay.addEventListener('click', () => {
        overlay.style.display = 'none';
        modal.style.display = 'none';
    });

    // 确认按钮事件处理（你可以在这里添加你自己的确认逻辑）
    confirmBtn.addEventListener('click', () => {
        overlay.style.display = 'none';
        modal.style.display = 'none';
    });
</script>
</body>
</html>